<template>

    <div>
        <div>
            <Header></Header>
        </div>
        <el-row>
            <span v-html="product.productDesc"></span>
            <el-form style="position: absolute;font-size: 24px;margin-top: 250px;margin-left: 200px">
                <!--<el-form-item >
                    &lt;!&ndash;<el-radio v-model="orderid" v-bind:label="obj.id" style="float: left;font-size: 18px">
                        {{obj.productName}} &nbsp;&nbsp;&nbsp;&nbsp; ${{obj.productPrice}}
                    </el-radio>&ndash;&gt;
                    <div class="radio-box" v-for="(obj,index) in content" :key="obj.id">
                        <span class="radio" :class="{'on': orderid===obj.id}"></span>
                        <input v-model="orderid" :value="obj.id" class="input-radio" type="radio">
                        {{obj.productName}} &nbsp;&nbsp;&nbsp;&nbsp; ${{obj.productPrice}}
                    </div>
                </el-form-item>-->
                <el-form-item>
                    <el-row type="flex">请联系系统管理员开通：</el-row>
                    <div v-for="type in adminList">
                        <el-row type="flex">{{type.label}}:{{type.value}}</el-row>
                    </div>
                </el-form-item>
            </el-form>
            <div style="position: fixed;bottom: 10px;left: 40%;">
                <!--<p>
                    <el-checkbox v-model="agree">我已同意该项目购买条款</el-checkbox>
                </p>
                <p>
                    <el-button style="float: left;width: 300px;" type="primary" @click="submitorder()">提交订单</el-button>
                </p>-->
                <p>
                    <el-button style="width: 300px;" @click="backHome">返  回</el-button>
                </p>
            </div>
        </el-row>
    </div>
</template>
<script>

    import Header from '../Header.vue'
    import ElForm from "../../../node_modules/element-ui/packages/form/src/form.vue";
    import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
    import api from '../../axios'
    import ElCheckbox from "../../../node_modules/element-ui/packages/checkbox/src/checkbox";
    import ElRow from "element-ui/packages/row/src/row";

    export default {
        components: {
            ElRow,
            ElCheckbox,
            ElFormItem,
            ElForm,
            Header
        },
        mounted() {
            if (!this.$route.params.product) {
                this.$router.push({
                    path: '/home'
                });
                return;
            } else {
                this.product = this.$route.params.product;
            }
            this.products();

            this.adminList = this.$getDictList("system_admin");
        },
        data() {
            return {
                content: '',
                orderid: '',
                product: {},
                agree: false,
                adminList: []
            }
        },
        methods: {
            products() {
                this.axios.hGet("/api/product/list", "", (data) => {
                    if (data.success) {
                        this.content = data.data;
                    }
                    console.log(this.content)
                });
            },
            submitorder() {
                if (!this.agree) {
                    this.$message.warning("请同意购买条款");
                    return;
                }

                if (!this.orderid) {
                    this.$message.warning("请选择产品服务方案");
                    return;
                }

                let user = localStorage.getItem('userInfo');
                let url = this.$route.params.product.srvImgUrl;
                var json = JSON.parse(user);
                let proname;
                let proid;
                for (let obj in this.content) {
                    if (this.content[obj].id == this.orderid) {
                        proname = this.$route.params.product.productName + ":" + this.content[obj].productName;
                        console.log(proname);
                    }
                }
                var order = {
                    email: user.email,
                    imgUrl: url,
                    mobile: user.mobile,
                    productId: this.orderid,
                    prodctName: proname,
                    userId: user.id,
                    userName: user.username
                }

                this.axios.hPost("/api/order/submit", order, (resp) => {
                    if (resp.success) {
                        this.$router.push({
                            path: '/home'
                        });
                    }
                });
            },

            backHome() {
                this.$router.push({
                    name: 'home'
                })
            }

        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>


    .el-form-item el-form-item__content {
        font-size: 18px;
    }

    span.el-radio__label {
        font-size: 18px;
        padding-left: 10px;
    }

    .el-button {
        width: 100px;
        border-radius: 10px;
        //border: 2px solid #000000;
        line-height: 10px;
        font-size: 14px;
        font-weight: bold;
    }

    .radio-box {
        /*display: inline-block;*/
        position: relative;
        height: 25px;
        line-height: 25px;
        margin-right: 5px;
        margin-left: 20px;
        width: 300px;
        text-align: left;
        font-size: 18px;
        margin-bottom: 30px;
    }

    .input-radio {
        display: inline-block;
        position: absolute;
        opacity: 0;
        width: 25px;
        height: 25px;
        cursor: pointer;
        left: 0px;
        outline: none;
        -webkit-appearance: none;

    }

    .radio {
        display: inline-block;
        width: 25px;
        height: 25px;
        vertical-align: middle;
        cursor: pointer;
        background-image: url(../../assets/unchecked.png);
        background-repeat: no-repeat;
        //background-position: 0 0;
        background-size: 100% 100%;
    }

    .on {
        background-image: url(../../assets/checked.png);
        background-size: 100% 100%;
    }
</style>